<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #warp{
            position: relative;
            margin: 0 auto;
        }
        .box{
            padding: 10px;
            float: left;
        }
        .pic{
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 5px #ccc;
        }
        .pic img{
            width: 255px;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="warp">
    </div>
    <script>
        var main = document.getElementById('warp');
        console.log(
            main
        )
        function generatorEml () {
            var i = Math.floor(Math.random() * 12);
            var s = `
                <div class="box">
                    <div class="pic">
                        <img src="./imgs/${i}.jpg" alt="">
                    </div>
                </div>
            `
            return s
        }

        function gEml() {
            var s = ``
            for (let i = 0; i < 20; i++) {
                s+= generatorEml()
            }
            return s
        }

        main.innerHTML = gEml()

        // 瀑布流----
        $(window).on('load', function() {
            var main = $('#warp');

            $(window).on('scroll', function() {
                let lastBoxHeight = main.find('.box').last()
                // 最后一个元素的 top + 高度/2
                let lastBoxDis = lastBoxHeight.offset().top + Math.floor(lastBoxHeight.outerHeight() / 2)
                let scrollTop = $(window).scrollTop() + $(window).height()
                
                // 最后一个元素的 top + 高度/2 < 滚动了多少
                let isLoadData = lastBoxDis < scrollTop
                if (isLoadData) {
                    console.log('加载数据')
                    main.html(main.html() + gEml())
                    waterfall()
                }
            })

            // 瀑布流 算法
            function waterfall() {
                var boxs = main.find('.box');
                var W = boxs.eq(0).outerWidth()
                // 得出一共有多少列
                let cols = Math.floor($(window).width() / W);
                // 为外层 warp 设置宽度
                main.css({ width: cols * boxs.eq(0).outerWidth() + 'px' })

                let hCols = []
                // 得出四个列的每一列的高度
                boxs.each(function(index) {
                    if (index < cols) {
                        hCols.push(
                            $(this).outerHeight()
                        )
                    } else {
                        // 最小列的高度
                        let minHeight = Math.min.apply(null, hCols);
                        // 第几列
                        let i = hCols.indexOf(minHeight)
                        
                        // 更新列的高度
                        hCols[i] += $(this).outerHeight();
                        
                        // 把新来的块放在列高最小的那一列的后面
                        $(this).css({
                            position: 'absolute',
                            top: minHeight + 'px',
                            left: (i * W) + 'px'
                        })
                    }
                })

            }

            waterfall()

        })

    </script>
</body>
</html>